FlyTalk.views.Overlay = Ext.extend(Ext.Panel, {
	fullscreen: true,
	
    initComponent: function () {
		
		this.toolbar = new Ext.Toolbar({
			title: 'Bored',
			doc: 'top',
			layout: 'hbox',
			items: [
				{xtype: 'spacer'},
				//this.composeButton,
			]
		});
		
		this.dockedItems = [this.toolbar];
		
        // buttons for overlay 
        this.followButton = new Ext.Button({
        	text: 'Follow this post',
			ui: 'small',
			width: 187, 
			handler: this.followButtonTap,
			scope: this
        });
    	
    	this.unfollowButton = new Ext.Button({
    		text: 'Unfollow this post',
			ui: 'small',
			width: 187,
			handler: this.unfollowButtonTap,
			scope: this
        });
    	
    	this.replyButton = new Ext.Button({
    		text: 'Reply to this post',
			ui: 'small',
			width: 187,
			handler: this.replyButtonTap,
			scope: this
        });
    	
    	this.upButton = new Ext.Button({
    		text: 'Thumbs up',
			ui: 'small',
			width: 187,
			handler: this.upButtonTap,
			scope: this
        });
    	
    	this.downButton = new Ext.Button({
    		text: 'Thumbs down',
			ui: 'small',
			width: 187,
			handler: this.downButtonTap,
			scope: this
        });
    	
    	this.threadButton = new Ext.Button({
    		text: 'See conversation',
			ui: 'small',
			width: 187,
			handler: this.threadButtonTap,
			scope: this
        });
    	
    	this.cancelButton = new Ext.Button({
    		text: 'Cancel',
			ui: 'small',
			width: 187,
			handler: this.cancelButtonTap,
			scope: this
        });
        
        // overlay
        this.overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: true,
            width: 200,
            height: 200,
            layout: 'vbox',
            title: '',
            items:[
                 this.followButton,
                 this.unfollowButton,
                 this.replyButton,
                 this.upButton,
                 this.downButton,
                 this.threadButton,
                 this.cancelButton,
            ]
        });
		
		FlyTalk.views.Overlay.superclass.initComponent.call(this);
        
    },

    followButtonTap: function () {
    	alert(this.overlay.title);
    	FlyTalk.views.Overlay.overlay.hide();

    	Ext.dispatch({
            controller: FlyTalk.controllers.dbController,
            action: 'follow',
            fid: this.overlay.title,
        });
    },
    
    cancelButtonTap: function () {
    	FlyTalk.views.Overlay.overlay.hide();
    },
});